
import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: MyApp(
        // prodcuts:List.generate(20, (i)=>Product('商品 $i','这是一个商品详情，编号为：$i'))
      ),
    ));

class NavigationIconView {
  final BottomNavigationBarItem item;
  NavigationIconView({Key key, String title, IconData icon, IconData activeIcon}) :
    item = BottomNavigationBarItem(
      icon: Icon(icon),
      activeIcon: Icon(activeIcon),
      title: Text(title),
      backgroundColor: Colors.white,
    );
}

class Product{
  final String title;
  final String description;
  Product(this.title,this.description);
}


class MyApp extends StatefulWidget {
 final List<Product> prodcuts;
  MyApp({Key key,@required this.prodcuts}):super(key:key);
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
    final List prodcuts=List.generate(20, (i)=>Product('商品 $i','这是一个商品详情，编号为：$i'));
    List<NavigationIconView> _navigationViews;
    void initState() { 
      super.initState();
      _navigationViews = [
        NavigationIconView( 
          title: '首页',
          icon: Icons.access_alarm,
        ),
        NavigationIconView(
          title: '购物车',
          icon: Icons.shopping_cart,
        ),
        NavigationIconView(
          title: '客服',
          icon: Icons.phone_android,
        ),
        NavigationIconView(
          title: '我的',
          icon: Icons.person,
        ),
      ];
    }
  @override
  Widget build(BuildContext context) {
    final BottomNavigationBar botNavBar = BottomNavigationBar(
          items: _navigationViews.map((NavigationIconView view) {
            return view.item;
          }).toList(),
          type: BottomNavigationBarType.fixed,
        );
    return Scaffold(
      appBar: AppBar(
        title: Text('首页商品列表'),
      ),
      body: ListView.builder(
        itemCount: prodcuts.length,
        itemBuilder: (context,index){
          return ListTile(
            title: Text(prodcuts[index].title),
            onTap: (){
              Navigator.push(context, MaterialPageRoute(builder: (context)=> ProductDetail(products:prodcuts[index])));
            },
          );
        },
      ),
      bottomNavigationBar: botNavBar,
    );
  }
}


class ProductDetail extends StatelessWidget{
   final Product products;
  ProductDetail({Key key,@required this.products}):super(key:key);
  @override 
  Widget build (BuildContext context){
    return Scaffold(
      appBar:AppBar(
        title:Text('${products.title}'),
        ),
      body: Center(
        child: Text('${products.description}'),
      ),
    );
  }
}